<template>
  <!-- 定义一个容器用于显示网络拓扑图 -->

  <div id="network-topology" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "NetworkTopology",
  data() {
    return {
      myChart: null,
      option: {
        animationDuration: 500, // 添加全局动画时长
        animationEasing: "cubicInOut", // 添加全局动画缓动函数
        initChart: {
          series: [
            {
              type: "graph",
              layout: "none",
              data: [
                { name: "UDR", x: 0, y: 0, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100] },
                { name: "NRF", x: 100, y: 0, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100] },
                { name: "PCF", x: 200, y: 0, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100] },
                { name: "NSSF", x: 300, y: 0, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100] },
                { name: "AUSF", x: 0, y: 50, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100] },
                { name: "AMF", x: 100, y: 50, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100] },
                { name: "SMF", x: 200, y: 50, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100] },
                { name: "UPF-0", x: 150, y: 110, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100], label: { position: "left" } },
                { name: "UPF-1", x: 150, y: 160, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100], label: { position: "left" } },
                { name: "UPF-2", x: 250, y: 110, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100] },
                { name: "UPF-3", x: 250, y: 160, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [90, 100] },
                { name: "网元结点", x: 150, y: 200, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [70, 80], label: { fontSize: 24 } },
                { name: "UPF中心点", x: 200, y: 83, symbol: "none", symbolSize: [50, 50], label: { show: false } },
                { name: "NSSF连接点", x: 300, y: 25, symbol: "none", symbolSize: [50, 50], label: { show: false } },
              ],
              links: [
                { source: "UDR", target: "AUSF", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "NRF", target: "AMF", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "PCF", target: "SMF", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "UPF-0", target: "UPF-2", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "UPF-0", target: "UPF-3", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "UPF-1", target: "UPF-2", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "UPF-1", target: "UPF-3", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "SMF", target: "UPF中心点", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "NSSF", target: "NSSF连接点", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
              ], // 初始化为空
              label: {
                show: true,
                position: "right",
                formatter: "{b}",
                color: "white",
                fontSize: 30,
              },
              lineStyle: {
                curveness: 0,
                width: 5,
                color: "white",
                opacity: 1,
              },
              markLine: {
                data: [
                  [
                    { coord: [-50, 25] }, // 水平线起点
                    { coord: [350, 25] }, // 水平线终点
                  ],
                ],
                name: "bus",
                lineStyle: {
                  type: "solid",
                  color: "white",
                  width: 5,
                },
                symbol: "none",
                tooltip: {
                  show: true,
                  formatter: "bus line",
                },
              },
            },
          ],
        },
        deployChart: {
          graphic: [
            {
              type: "rect",
              shape: {
                x: 400,
                y: 330,
                width: 600,
                height: 280,
              },
              style: {
                stroke: "#FFFFFF",
                lineWidth: 5,
                fill: "none",
                lineDash: [4, 6],
              },
              transition: "all", // 添加过渡效果
              animationDuration: 500, // 与全局动画时长一致
              animationEasing: "cubicInOut", // 与全局动画缓动函数一致
            },
          ],
          series: [
            {
              type: "graph",
              layout: "none",
              data: [
                { name: "UDR", x: 0, y: 0, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "NRF", x: 100, y: 0, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "PCF", x: 200, y: 0, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "NSSF", x: 300, y: 0, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "AUSF", x: 0, y: 50, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "AMF", x: 100, y: 50, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "SMF", x: 200, y: 50, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "NWDAF", x: 300, y: 50, symbol: "image://" + require("@/assets/icon/leaf2.png"), symbolSize: [80, 90] },
                { name: "DCCF", x: 400, y: 0, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "ADRF", x: 400, y: 50, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "UPF-0", x: 150, y: 110, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90], label: { position: "left" } },
                { name: "UPF-1", x: 150, y: 160, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90], label: { position: "left" } },
                { name: "UPF-2", x: 250, y: 110, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "UPF-3", x: 250, y: 160, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90] },
                { name: "网元结点", x: 130, y: 200, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [60, 60], label: { fontSize: 24 } },
                { name: "中心服务器", x: 230, y: 200, symbol: "image://" + require("@/assets/icon/leaf2.png"), symbolSize: [60, 60], label: { fontSize: 24 } },
                { name: "UPF中心点", x: 200, y: 85, symbol: "none", symbolSize: [40, 40], label: { show: false } },
              ],
              links: [
                { source: "UDR", target: "AUSF", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "NRF", target: "AMF", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "PCF", target: "SMF", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "NSSF", target: "NWDAF", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "DCCF", target: "ADRF", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "UPF-0", target: "UPF-2", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "UPF-0", target: "UPF-3", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "UPF-1", target: "UPF-2", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "UPF-1", target: "UPF-3", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "SMF", target: "UPF中心点", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
              ], // 初始化为空
              label: {
                show: true,
                position: "right",
                formatter: "{b}",
                color: "white",
                fontSize: 30,
              },
              lineStyle: {
                curveness: 0,
                width: 5,
                color: "white",
                opacity: 1,
              },
              markLine: {
                data: [
                  [
                    { coord: [-50, 25] }, // 水平线起点
                    { coord: [450, 25] }, // 水平线终点
                  ],
                ],
                name: "bus",
                lineStyle: {
                  type: "solid",
                  color: "white",
                  width: 5,
                },
                symbol: "none",
                tooltip: {
                  show: true,
                  formatter: "bus line",
                },
              },
            },
          ],
        },
        agentChart: {
          graphic: [
          {
              type: "rect",
              shape: {
                x: 450,
                y: 570,
                width: 1050,
                height: 220,
              },
              style: {
                stroke: "#FFFFFF",
                lineWidth: 5,
                fill: "none",
                lineDash: [4, 6],
              },
              transition: "all", // 添加过渡效果
              animationDuration: 500, // 与全局动画时长一致
              animationEasing: "cubicInOut", // 与全局动画缓动函数一致
            },
            // {
            //   type: "rect",
            //   shape: {
            //     x: 650,
            //     y: 70,
            //     width: 600,
            //     height: 200,
            //   },
            //   style: {
            //     stroke: "#FFFFFF",
            //     lineWidth: 5,
            //     fill: "none",
            //     lineDash: [4, 6],
            //   },
            //   transition: "all", // 添加过渡效果
            //   animationDuration: 500, // 与全局动画时长一致
            //   animationEasing: "cubicInOut", // 与全局动画缓动函数一致
            // },
            {
              type: "rect",
              shape: {
                x: 450,
                y: 90,
                width: 1050,
                height: 420,
              },
              style: {
                stroke: "#FFFFFF",
                lineWidth: 5,
                fill: "none",
                lineDash: [4, 6],
              },
              transition: "all", // 添加过渡效果
              animationDuration: 500, // 与全局动画时长一致
              animationEasing: "cubicInOut", // 与全局动画缓动函数一致
            },
          ],
          series: [
            {
              type: "graph",
              layout: "none",
              data: [
                { name: "DCCF", x: 10, y: 130, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [60, 70] },
                { name: "SMF", x: 220, y: 130, symbol: "image://" + require("@/assets/icon/nwdaf2.png"), symbolSize: [80, 70] },
                { name: "NWDAF", x: 154, y: 130, symbol: "image://" + require("@/assets/icon/nwdaf5.png"), symbolSize: [110, 80] },
                { name: "UPF", x: 80, y: 130, symbol: "image://" + require("@/assets/icon/nwdaf2.png"), symbolSize: [80, 70] },
                { name: "ADRF", x: 10, y: 150, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [60, 70] },
                { name: "AMF", x: 220, y: 150, symbol: "image://" + require("@/assets/icon/nwdaf2.png"), symbolSize: [80, 70] },
                { name: "PCF", x: 150, y: 150, symbol: "image://" + require("@/assets/icon/nwdaf2.png"), symbolSize: [80, 70] },
                { name: "NRF", x: 80, y: 150, symbol: "image://" + require("@/assets/icon/nwdaf2.png"), symbolSize: [80, 70] },
                { name: "UE", x: -80, y: 140, symbol: "image://" + require("@/assets/icon/user.png"), symbolSize: [90, 100], label: { position: "bottom" } },
                { name: "gNB", x: -40, y: 140, symbol: "image://" + require("@/assets/icon/gNB2.png"), symbolSize: [110, 110], label: { position: "bottom" } },
                { name: "NF", x: -60, y: 60, symbol: "image://" + require("@/assets/icon/nwdaf2.png"), symbolSize: [100, 90], label: { position: "bottom" } },
                { name: " SMF ", x: 300, y: 60, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90], label: { position: "bottom" } },
                { name: "Agent", x: 90, y: 60, symbol: "image://" + require("@/assets/icon/leaf.png"), symbolSize: [80, 100], label: { position: "bottom" } },
                { name: "联邦中心", x: 160, y: 60, symbol: "image://" + require("@/assets/icon/leaf2.png"), symbolSize: [80, 100], label: { position: "bottom" } },
                { name: "Server", x: 300, y: 140, symbol: "image://" + require("@/assets/icon/server.png"), symbolSize: [80, 90], label: { position: "bottom" } },
                { name: "数据预处理模块", x: 20, y: 10, symbol: "image://" + require("@/assets/icon/collect.png"), symbolSize: [120, 130], label: { position: "bottom" } },
                { name: "数据采集模块", x: 20, y: 60, symbol: "image://" + require("@/assets/icon/preprocess.png"), symbolSize: [120, 130], label: { position: "bottom" }  },
                { name: "边缘智能代理模块", x: 90, y: 10, symbol: "image://" + require("@/assets/icon/federal.png"), symbolSize: [120, 130], label: { position: "bottom" } },
                { name: "负载感知模块", x: 230, y: 10, symbol: "image://" + require("@/assets/icon/route.png"), symbolSize: [130, 130], label: { position: "bottom" } },
                { name: "策略生成模块", x: 230, y: 60, symbol: "image://" + require("@/assets/icon/strategy.png"), symbolSize: [130, 130], label: { position: "bottom" } },
                { name: "联邦中心服务器模块", x: 160, y: 10, symbol: "image://" + require("@/assets/icon/federal.png"), symbolSize: [120, 130], label: { position: "bottom" } },
                { name: "NFs连接点", x: 0, y: 25, symbol: "none", symbolSize: [40, 40], label: { show: false } },
                { name: "核心网连接点left", x: -12, y: 140, symbol: "none", symbolSize: [40, 40], label: { show: false } },
                { name: "核心网连接点right", x: 260, y: 140, symbol: "none", symbolSize: [40, 40], label: { show: false } },
                { name: "NWDAF连接点", x: 150, y: 25, symbol: "none", symbolSize: [40, 40], label: { show: false } },
                { name: "agent连接点", x: 93, y: 120, symbol: "none", symbolSize: [40, 40], label: { show: false } },
                { name: "联邦中心连接点", x: 143, y: 120, symbol: "none", symbolSize: [40, 40], label: { show: false } },
                { name: "Collect连接点", x: 100, y: 88, symbol: "none", symbolSize: [40, 40], label: { show: false } },
                { name: "NWDAF-Server连接点", x: 168, y: 110, symbol: "none", symbolSize: [40, 40], label: { show: false } },
                { name: "核心网", x: 113, y: 115, symbol: "image://" + require("@/assets/icon/module.png"), symbolSize: [0, 0], label: { fontSize: 30 } },
                // { name: "联邦模式", x: 105, y: 5, symbol: "image://" + require("@/assets/icon/module.png"), symbolSize: [0, 0], label: { fontSize: 25 } },
                { name: "数据高效智能管理系统", x: 82, y: -12, symbol: "image://" + require("@/assets/icon/module.png"), symbolSize: [0, 0], label: { fontSize: 32 } },
                { name: "x", x: 320, y: 150, symbol: "none", symbolSize: [40, 40], label: { show: false } },
                { name: "y", x: 250, y: 0, symbol: "none", symbolSize: [40, 40], label: { show: false } },
              ],
              links: [
                { source: "UE", target: "gNB", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "gNB", target: "核心网连接点left", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "核心网连接点right", target: "Server", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" } },
                { source: "NF", target: "数据采集模块", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" }, lineStyle: { color: "#116dff", width: 8 }, symbol: ['none', 'arrow'], symbolSize: 30 },
                { source: "Agent", target: "边缘智能代理模块", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" }, lineStyle: { color: "#7f9ed7", width: 8 } },
                { source: "联邦中心", target: "联邦中心服务器模块", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" }, lineStyle: { color: "#7f9ed7", width: 8 } },
                { source: "数据采集模块", target: "数据预处理模块", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" }, lineStyle: { color: "#116dff", width: 8 }, symbol: ['none', 'arrow'], symbolSize: 30 },
                { source: "数据预处理模块", target: "边缘智能代理模块", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" }, lineStyle: { color: "#116dff", width: 8 }, symbol: ['none', 'arrow'], symbolSize: 30 },
                { source: "边缘智能代理模块", target: "联邦中心服务器模块", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" }, lineStyle: { color: "#116dff", width: 8 }, symbol: ['arrow', 'arrow'], symbolSize: 30 },
                { source: "联邦中心服务器模块", target: "负载感知模块", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" }, lineStyle: { color: "#116dff", width: 8 }, symbol: ['none', 'arrow'], symbolSize: 30 },
                { source: "负载感知模块", target: "策略生成模块", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" }, lineStyle: { color: "#116dff", width: 8 }, symbol: ['none', 'arrow'], symbolSize: 30 },
                { source: "策略生成模块", target: " SMF ", label: { show: true, formatter: "", position: "middle", rotate: 0, color: "white" }, lineStyle: { color: "#116dff", width: 8 }, symbol: ['none', 'arrow'], symbolSize: 30 },
              ], // 初始化为空
              label: {
                show: true,
                position: "right",
                formatter: "{b}",
                color: "white",
                fontSize: 30,
              },
              lineStyle: {
                curveness: 0,
                width: 5,
                color: "white",
                opacity: 1,
              },
              markLine: {
                data: [
                  
                ],
                name: "bus",
                lineStyle: {
                  type: "solid",
                  color: "white",
                  width: 5,
                },
                symbol: "none",
                tooltip: {
                  show: true,
                  formatter: "bus line",
                },
              },
            },
          ],
        },
      },
    };
  },
  mounted() {
    this.initChart();
    this.$nextTick(() => {
      this.agentChart();
    });
  },
  methods: {
    initChart() {
      if (this.myChart) {
        this.myChart.setOption(this.option.initChart);
      } else {
        const container = document.getElementById("network-topology");
        if (container) {
          this.myChart = echarts.init(container);
          this.$nextTick(() => {
            this.myChart.setOption(this.option.initChart);
          });
        }
      }
    },
    deployChart() {
      if (this.myChart) {
        this.myChart.setOption(this.option.deployChart);
      } else {
        this.initChart();
        this.myChart.setOption(this.option.deployChart);
      }
    },
    agentChart() {
      if (this.myChart) {
        this.myChart.setOption(this.option.agentChart);
      } else {
        this.initChart();
        this.myChart.setOption(this.option.agentChart);
      }
      this.$nextTick(() => {
        this.myChart.on("click", this.handleClick);
      });
    },
    handleClick(params) {
      console.log(params.name);
      switch (params.name) {
        case "Service":
          this.$router.push("/service");
          break;
        case "分布式采集及预处理":
          this.$router.push("/collection");
          break;
        case "基于联邦架构的业务感知":
          this.$router.push("/recognize");
          break;
        case "全局负载感知及策略优化":
          this.$router.push("/analyse");
          break;
      }
    },
  },
};
</script>

<style scoped>
/* 设置容器的宽度和高度 */
#network-topology {
  position: relative;
  width: 100%;
  height: 100%;
}

.return-icon {
  position: absolute;
  left: 10px;
  top: -30px;
  background-color: transparent;
  color: cyan;
  font-size: 40px;
  cursor: pointer;
  outline: none;
  z-index: 1;
}

.return-icon::after {
  content: "首页";
  /* 这是要显示的文字 */
  position: absolute;
  left: 100%;
  /* 将文字放置在图标的右侧 */
  top: 50%;
  transform: translateY(-50%);
  /* 垂直居中对齐 */
  white-space: nowrap;
  /* 防止文字换行 */
  background-color: transparent;
  /* 背景颜色 */
  color: cyan;
  /* 文字颜色 */
  padding: 2px 4px;
  /* 内边距 */
  border-radius: 4px;
  /* 圆角 */
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s;
  /* 过渡效果 */
  pointer-events: none;
  /* 防止伪元素影响点击事件 */
  font-size: 24px;
  font-weight: bold;
}

.return-icon:hover::after {
  opacity: 1;
  /* 鼠标悬停时显示 */
  pointer-events: auto;
  /* 鼠标悬停时允许点击 */
}
</style>
